<template>
	<view class="order_type_page">
		
		<view class="tabs_ordere_list">
			
			<view class="item_tab" :class="currentIndex === item.id ? 'active' : ''" v-for="(item, index) in tabdata" :key="item.id" @click="handleTab(item.id)">
				<view class="tabs_text">
					<view class="txt_1">{{item.title}}</view>
				</view>
			</view>
			
		</view>
		
		<view class="mt32 area_order_1" v-if="currentIndex === 0">
			<view class="pt32 pb32 flex_box aic">
				<view class="item ov"><view class="fs32 fwb cor_333 clamp_1">回收的收货地址</view></view>
			</view>
			<view class="mt20 fs28 lh40 cor_666">请点击下方【提交订单】按钮，提交后在订单详情页可以看到我们的收货地址</view>
			<view class="mt24 box_buy_1">
				<view class="">如果您的回收订单需要我们系统进行审核，请耐心等待即可，审核一般不会超过30分钟</view>
			</view>
		</view>
		
		<!-- 上门取件 -->
		<view class="mt32 area_order_1" v-if="currentIndex === 1">
			
			<view class="pt32 flex_box aic">
				<view class="fs32 fwb cor_333 mr20">取件时间</view>
				<view class="item ov">
					<view class="df aic">
						<view class="fs28 cor_666">2025-05-15(周四)</view>
						<view class="ml15 cor_F52">09:00:00</view>
					</view>
					
				</view>
				<image src="@/static/images/icon_arw_4.png" class="img_4"></image>
			</view>
			
			<view class="pt32 flex_box aic">
				<view class="fs32 fwb cor_333 mr20">取件地址</view>
				<view class="item ov">
					<view class="df aic">
						<view class="fs28 cor_666">信息15454818820</view>
					</view>
					
				</view>
				<image src="@/static/images/icon_arw_4.png" class="img_4"></image>
			</view>
			
			<view class="mt15 fs28 cor_666">安徽省淮南市大通区钱钱钱</view>
			
			<view class="mt24 box_buy_1">
				<view class="">帮您预约上门取件，运费已自动从订单中扣除，不提供打包服务，需您自己打包好，偏远地区不支持上门取件</view>
			</view>
			
		</view>
		
		<!-- 同城自送 -->
		<view class="mt32 area_order_3" v-if="currentIndex === 2">
			<view class="pt40 pb40 bb1 flex_box aic">
				<view class="item ov"><view class="fs28 fwb cor_333 clamp_1">请送至以下地址</view></view>
				<up-copy content="安徽省淮南市田家庵区">
					<view class="fs28 fwb cor_333">[复制]</view>
				</up-copy>
			</view>
			<view class="mt40 fs28 lh40 cor_666">
				<view class="">肆维电玩 18561109735【点击拨打】</view>
				<view class="">山东省烟台市莱山区迎春大街飞龙某某大厦</view>
			</view>
			<view class="mt24 box_buy_1">
				<view class="">请在9:00-17:00送至上述地址，到达后拨打电话即可</view>
			</view>
		</view>
		
		<view class="mt24 area_order_3">
			<view class="pt40 pb40 bb1 flex_box aic">
				<view class="item ov"><view class="fs32 fwb cor_333 clamp_1">商品信息</view></view>
			</view>
			
			<view class="pt32 pb20">
				<view class="flex_box aic">
					<view class="re mr15 fs0"><image src="@/static/images/banner_01.png" class="shop_pic_size"></image></view>
					<view class="item ov">
						<view class="flex_box aic">
							<view class="item ov">
								<view class="fs28 cor_333 clamp_1">塞尔达 荒野之息</view>
							</view>
							<view class="fs24 cor_333">预估</view>
							<view class="fs32 cor_F52 ml10">¥ 238元</view>
						</view>
						<view class="mt15 flex_box aic">
							<view class="item ov">
								<view class="fs24 cor_999 clamp_1">裸卡简装，中文，非国行</view>
							</view>
							<view class="ml10 fs24 cor_999">X1</view>
						</view>
					</view>
				</view>
				
				<view class="pt32 pb32 bb1 flex_box aic">
					<view class="fs28 fwb cor_F52">购买订单编号：</view>
					<view class="item ov"><view class="fs24 cor_999">请把购买时的订单号粘贴到这里</view></view>
				</view>
				
				<view class="mt15 bb1">
					<textarea class="textarea_01" placeholder-style="color: #999" placeholder="请输入订单留言（200字以内）"></textarea>
				</view>
				
				
				
			</view>
			
		</view>
		
		
		
		<view class="mt24 mb32 area_order_2">
			<view class="flex_box aic">
				<view class="item ov">
					<view class="fs28 cor_333">支付方式</view>
				</view>
				<view class="df aic">
					<image src="@/static/images/icon_wechat.png" class="" style="width: 33rpx; height: 29rpx;"></image>
					<view class="ml15 fs28 cor_999">微信支付</view>
				</view>
			</view>
		</view>
		
	</view>
	
	<view class="operate_bottom_fix">
		<view class="df aic jcfe">
			<view class="fs28 cor_F52">
				<text class="">合计</text>
				<text class="ml5 mr5 fwb" style="font-size: 52rpx;">238</text>
				<text class="">元</text>
			</view>
			<view class="ml35 order_btn">提交订单</view>
		</view>
		
	</view>
	
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	
	const currentIndex = ref(2);
	const tabdata = ref([
		{ id: 0, title: '自行寄件' },
		{ id: 1, title: '上门取件' },
		{ id: 2, title: '同城自送' }
	]);
	
	const handleTab = (id) => {
		currentIndex.value = id;
	};
	
</script>

<style lang="scss" scoped>
	
	page { background: #F6F6F6; }
	
	.order_type_page {
		position: relative;
		padding: 24rpx 24rpx calc(136rpx + content(safe-area-inset-bottom));
		padding: 24rpx 24rpx calc(136rpx + env(safe-area-inset-bottom));
		min-height: 100vh;
		background: linear-gradient(90deg, #FFEEEE 0%, #FFFFFF 90.99%);
		.area_order_1 {
			padding: 0 24rpx 48rpx;
			border-radius: 16rpx;
			background: linear-gradient(180deg, #FFEEEE 0%, #FFFFFF 70.99%);
			.tipe_btn {
				position: relative;
				padding: 0 16rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 24rpx;
				color: #fff;
				background: #343434;
				border-radius: 28rpx;
			}
		}
		.area_order_2 {
			position: relative;
			padding: 38rpx 32rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}
		
		.area_order_3 {
			position: relative;
			padding: 0 24rpx 48rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}
		
	}
	
	.shop_pic_size {
		width: 196rpx;
		height: 120rpx;
		border-radius: 12rpx;
	}
	
	.order_btn {
		position: relative;
		padding: 0 40rpx;
		min-width: 208rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background: #F5220F;
		border-radius: 44rpx;
	}
	
	.operate_bottom_fix {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 24rpx 32rpx calc(24rpx + content(safe-area-inset-bottom));
		padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 5;
	}
	
	
	
	.box_buy_1 {
		position: relative;
		padding: 12rpx 24rpx;
		font-size: 24rpx;
		color: #FF594A;
		background: #FCEDED;
		border-radius: 12rpx;
	}
	
	.textarea_01 {
		position: relative;
		display: inline-block;
		padding: 20rpx;
		height: 160rpx;
		font-size: 28rpx;
		color: '#333';
		border: 0;
		background: #fff;
		outline: none;
	}

</style>
